import * as React from "react"
import { ConnectorDocumentation } from "../types"
import { ReactNode } from "react"

export const googleProjectCreation = (
  <>
    At first, create or select Google project:
    <ul>
      <li>
        Go to the{" "}
        <a target="_blank" href="https://console.developers.google.com/">
          API Console page
        </a>
      </li>
      <li>Click "Select Project" if you have already had a project or click "Create Project" if not</li>
    </ul>
    Read more about{" "}
    <a target="_blank" href="https://support.google.com/googleapi/answer/6251787?hl=en#zippy=%2Ccreate-a-project">
      How to create Google project
    </a>
  </>
)

export type DocumentationParams = {
  oauthEnabled?: boolean
  serviceName: string
  serviceAccountEnabled?: boolean
  scopes?: string[]
  apis: string[]
  serviceAccountSpecifics?: ReactNode
}

export function googleServiceAuthDocumentation({
  oauthEnabled = false,
  scopes = [],
  serviceAccountEnabled = true,
  serviceName,
  apis,
  serviceAccountSpecifics = undefined,
}: DocumentationParams) {
  const scopeStr = scopes.join(" ")
  return (
    <>
      Following authorization methods are available for <b>{serviceName}</b>
      <ul>
        {oauthEnabled && (
          <li>
            <b>OAuth</b> — you'll need to provide Client Secret / Client Id (you can obtain in in{" "}
            <a target="_blank" href="https://console.cloud.google.com/">
              Google Cloud Console
            </a>
            ) and get a refresh token. Jitsu developed a small{" "}
            <a target="_blank" href="https://github.com/jitsucom/oauthcli">
              CLI utility for obtaining the token
            </a>
          </li>
        )}
        {serviceAccountEnabled && (
          <li>
            <b>Service Account</b> — you'll a){" "}
            <a target="_blank" href="https://cloud.google.com/iam/docs/creating-managing-service-account-keys">
              create a service account in Google Cloud Console
            </a>{" "}
            b) share google resource (such as document or analytics property) with this account (account email look like{" "}
            <code>[username]@jitsu-customers.iam.gserviceaccount.com</code>) c) put Service Account Key JSON (available
            in Google Cloud Console) in the field below
          </li>
        )}
      </ul>
      You should also enable Google API for your project. Go to the{" "}
      <a target="_blank" href="https://console.cloud.google.com/apis/library">
        Google APIs Library page
      </a>
      , search {apis.map<React.ReactNode>(t => <b key={t}>{t}</b>).reduce((prev, curr) => [prev, " and ", curr])} and
      make sure they are enabled
      {oauthEnabled && (
        <>
          <h1>
            1. Obtaining access through <b>OAuth</b>
          </h1>
          Jitsu requires 3 parameters for accessing {serviceName}:
          <ul>
            <li>
              <code>client_id</code> - An unique client identifier that is obtained from{" "}
              <a target="_blank" href="https://console.cloud.google.com/">
                Google Cloud Console
              </a>
            </li>
            <li>
              <code>client_secret</code> - A client secret string that is obtained from{" "}
              <a target="_blank" href="https://console.cloud.google.com/">
                Google Cloud Console
              </a>
            </li>
            <li>
              <code>refresh_token</code> - Access token. It could be generated by{" "}
              <a target="_blank" href="https://github.com/jitsucom/oauthcli">
                jitsucom/oauthcli
              </a>
            </li>
          </ul>
          <h2>
            Getting <code>client_id</code> and <code>client_secret</code>
          </h2>
          <ul>
            <li>
              Go to the{" "}
              <a target="_blank" href="https://console.cloud.google.com/apis/credentials">
                API Credentials page
              </a>
            </li>
            <li>
              Click "+ Create Credentials" ➞ "OAuth client ID" ➞ select <i>Desktop app</i> as application type
            </li>
            <li>
              Note: If you haven't configured OAuth Consent Screen yet, Google asks to configure it. The screen type
              should be 'External'
            </li>
          </ul>
          <h2>
            Getting <code>refresh_token</code>
          </h2>
          Copy Client ID and Client Secret parameters, use them for generating refresh token with{" "}
          <a target="_blank" href="https://github.com/jitsucom/oauthcli">
            jitsucom/oauthcli
          </a>{" "}
          tool:
          <p>
            <code>
              ./authorizer.py --client_id={"<YOUR CLIENT ID>"} --client_secret={"<YOUR CLIENT SECRET>"} --scope='
              {scopeStr}'
            </code>
          </p>
        </>
      )}
      {serviceAccountEnabled && (
        <>
          <h1>
            2. Obtaining access through <b>Service Account</b>
          </h1>
          <p>
            At first, create or select Google project. There is a{" "}
            <a
              target="_blank"
              href="https://support.google.com/googleapi/answer/6251787?hl=en#zippy=%2Ccreate-a-project"
            >
              good manual on how to do that
            </a>
          </p>
          <p>
            Then create a new{" "}
            <a target="_blank" href="https://cloud.google.com/iam/docs/creating-managing-service-accounts">
              <b>Google Service Account</b>
            </a>
            :{" "}
          </p>
          <ul>
            <li>
              Go to the{" "}
              <a target="_blank" href="https://console.developers.google.com/iam-admin/serviceaccounts">
                Service Accounts page
              </a>
            </li>
            <li>Click "+ Create Service Account"</li>
            <li>Fill Service account name and press DONE </li>
            <li>Click on the Email of created account in Service Accounts table, go to "KEYS" tab</li>
            <li>Click "ADD KEY" ➞ "Create new key" ➞ Select JSON ➞ "CREATE"</li>
            <li>Service Account JSON (private key) will be in downloaded file</li>
            {serviceAccountSpecifics && serviceAccountSpecifics}
          </ul>
        </>
      )}
    </>
  )
}

export const githubDocumentation: ConnectorDocumentation = {
  overview: (
    <>
      The GitHub Connector pulls the following data from the repository
      {": "}
      <a target="_blank" href="https://developer.github.com/v3/issues/assignees/#list-assignees">
        assignees
      </a>
      {", "}
      <a target="_blank" href="https://developer.github.com/v3/repos/collaborators/#list-collaborators">
        collaborators
      </a>
      {", "}
      <a target="_blank" href="https://developer.github.com/v3/repos/commits/#list-commits-on-a-repository">
        commits
      </a>
      {", "}
      <a target="_blank" href="https://developer.github.com/v3/issues/#list-issues-for-a-repository">
        issues
      </a>
      {", "}
      <a target="_blank" href="https://developer.github.com/v3/pulls/#list-pull-requests">
        pull requests
      </a>
      {", "}
      <a target="_blank" href="https://developer.github.com/v3/issues/comments/#list-comments-in-a-repository">
        comments
      </a>
      {", "}
      <a target="_blank" href="https://developer.github.com/v3/pulls/reviews/#list-reviews-on-a-pull-request">
        reviews
      </a>
      {", "}
      <a target="_blank" href="https://developer.github.com/v3/pulls/comments/">
        review comments
      </a>
      {", "}
      <a target="_blank" href="https://developer.github.com/v3/activity/starring/#list-stargazers">
        stargazers
      </a>
    </>
  ),
  connection: (
    <>
      <ul>
        <li>
          Go to the{" "}
          <a target="_blank" href="https://github.com/settings/tokens">
            GitHub tokens
          </a>{" "}
          page
        </li>
        <li>
          Create a new token with at <code>repo</code> scope.
        </li>
        <li>Save created token. It is used as Access Token in Jitsu UI</li>
      </ul>
    </>
  ),
}

export const intercomDocumentation: ConnectorDocumentation = {
  overview: (
    <>
      The Intercom Connector pulls the following entities:{" "}
      <a target="_blank" href="https://developers.intercom.com/intercom-api-reference/v2.0/reference">
        Intercom v2.0 API
      </a>
      {": "}
      <a target="_blank" href="https://developers.intercom.com/intercom-api-reference/reference#list-admins">
        Admins
      </a>
      {", "}
      <a target="_blank" href="https://developers.intercom.com/intercom-api-reference/reference#list-companies">
        Companies
      </a>
      {", "}
      <a target="_blank" href="https://developers.intercom.com/intercom-api-reference/reference#list-conversations">
        Conversations
      </a>
      {", "}
      <a
        target="_blank"
        href="https://developers.intercom.com/intercom-api-reference/reference#get-a-single-conversation"
      >
        Conversation Parts
      </a>
      {", "}
      <a target="_blank" href="https://developers.intercom.com/intercom-api-reference/reference#data-attributes">
        Data Attributes
      </a>
      {", "}
      <a
        target="_blank"
        href="https://developers.intercom.com/intercom-api-reference/reference#list-customer-data-attributes"
      >
        Customer Attributes
      </a>
      {", "}
      <a
        target="_blank"
        href="https://developers.intercom.com/intercom-api-reference/reference#list-company-data-attributes"
      >
        Company Attributes
      </a>
      {", "}
      <a target="_blank" href="https://developers.intercom.com/intercom-api-reference/reference#list-leads">
        Leads
      </a>
      {", "}
      <a target="_blank" href="https://developers.intercom.com/intercom-api-reference/reference#list-segments">
        Segments
      </a>
      {", "}
      <a target="_blank" href="https://developers.intercom.com/intercom-api-reference/reference#list-segments">
        Company Segments
      </a>
      {", "}
      <a target="_blank" href="https://developers.intercom.com/intercom-api-reference/reference#list-tags-for-an-app">
        Tags
      </a>
      {", "}
      <a target="_blank" href="https://developers.intercom.com/intercom-api-reference/reference#list-teams">
        Teams
      </a>
      {", "}
      <a target="_blank" href="https://developers.intercom.com/intercom-api-reference/reference#list-users">
        Users
      </a>
      {", "}
    </>
  ),
  connection: (
    <ul>
      <li>
        Go to the{" "}
        <a target="_blank" href="https://app.intercom.com/a/developer-signup">
          Intercom Apps
        </a>{" "}
        page
      </li>
      <li>Click "New app"</li>
      <li>Select a clear name e.g. "Jitsu Connector"</li>
      <li>Select "Internal integration"</li>
      <li>Click "Create app"</li>
      <li>
        Go to the "Configure" tab and save Access Token value from "Authentication" section. It is used as API Access
        Token in Jitsu UI
      </li>
    </ul>
  ),
}

export const mixpanelDocumentation: ConnectorDocumentation = {
  overview: (
    <>
      The MixPanel Connector pulls the following data entities from{" "}
      <a target="_blank" href="https://mixpanel.com">
        MixPanel
      </a>
      {": "}
      <a target="_blank" href="https://developer.mixpanel.com/docs/exporting-raw-data#section-export-api-reference">
        Export (Events)
      </a>
      {", "}
      <a target="_blank" href="https://developer.mixpanel.com/docs/data-export-api#section-engage">
        Engage (People/Users)
      </a>
      {", "}
      <a target="_blank" href="https://developer.mixpanel.com/docs/data-export-api#section-funnels">
        Funnels
      </a>
      {", "}
      <a target="_blank" href="https://developer.mixpanel.com/docs/data-export-api#section-annotations">
        Annotations
      </a>
      {", "}
      <a target="_blank" href="https://developer.mixpanel.com/docs/cohorts#section-list-cohorts">
        Cohorts
      </a>
      {", "}
      <a target="_blank" href="https://developer.mixpanel.com/docs/data-export-api#section-engage">
        Cohort Members
      </a>
      {", "}
      <a
        target="_blank"
        href="https://developer.mixpanel.com/docs/data-export-api#section-hr-span-style-font-family-courier-revenue-span"
      >
        Revenue
      </a>
    </>
  ),
  connection: (
    <>
      <ul>
        <li>
          Go to the{" "}
          <a target="_blank" href="https://mixpanel.com/report">
            MixPanel Project settings
          </a>{" "}
          page
        </li>
        <li>Save API Secret value from "Access Keys" section of Overview tab. It is used as API Secret in Jitsu UI</li>
      </ul>
    </>
  ),
}

export const mySqlDocumentation: ConnectorDocumentation = {
  overview: <>MySQL connector pulls data from the remote database</>,
  connection: <>For connecting to MySQL you'll need host, port, username, password</>,
}

export const shopifyDocumentation: ConnectorDocumentation = {
  overview: (
    <>
      The Shopify Connector pulls the following entities from{" "}
      <a target="_blank" href="https://help.shopify.com/en/api/reference">
        Shopify API
      </a>{" "}
      {": "}
      <a target="_blank" href="https://help.shopify.com/en/api/reference/orders/abandoned_checkouts">
        Abandoned Checkouts
      </a>
      {", "}
      <a target="_blank" href="https://help.shopify.com/en/api/reference/products/collect">
        Collects
      </a>
      {", "}
      <a target="_blank" href="https://help.shopify.com/en/api/reference/products/customcollection">
        Custom Collections
      </a>
      {", "}
      <a target="_blank" href="https://help.shopify.com/en/api/reference/customers">
        Customers
      </a>
      {", "}
      <a target="_blank" href="https://help.shopify.com/en/api/reference/metafield">
        Metafields
      </a>
      {", "}
      <a target="_blank" href="https://help.shopify.com/en/api/reference/orders">
        Orders
      </a>
      {", "}
      <a target="_blank" href="https://help.shopify.com/en/api/reference/products">
        Products
      </a>
      {", "}
      <a target="_blank" href="https://help.shopify.com/en/api/reference/orders/transaction">
        Transactions
      </a>
    </>
  ),
  connection: (
    <>
      Follow this instruction to obtain an API key{" "}
      <a target="_blank" href="https://shopify.dev/tutorials/generate-api-credentials">
        How to obtain API Key
      </a>
    </>
  ),
}

export const slackDocumentation: ConnectorDocumentation = {
  overview: (
    <>
      The Slack Connector pulls the following data via Slack App (Slack bot) from{" "}
      <a target="_blank" href="https://api.slack.com/">
        Slack API
      </a>{" "}
      {": "}
      <a target="_blank" href="https://api.slack.com/methods/conversations.list">
        Channels
      </a>
      {", "}
      <a target="_blank" href="https://api.slack.com/methods/conversations.members">
        Channel Members
      </a>
      {", "}
      <a target="_blank" href="https://api.slack.com/methods/users.list">
        Users
      </a>
      {", "}
      <a target="_blank" href="https://api.slack.com/methods/conversations.replies">
        Threads (Channel replies)
      </a>
      {", "}
      <a target="_blank" href="https://api.slack.com/methods/usergroups.list">
        User Groups
      </a>
      {", "}
      <a target="_blank" href="https://api.slack.com/methods/files.list">
        Files
      </a>
      {", "}
      <a target="_blank" href="https://api.slack.com/methods/files.remote.list">
        Remote Files
      </a>
    </>
  ),
  connection: (
    <ul>
      <li>
        Go to the{" "}
        <a target="_blank" href="https://api.slack.com/apps?new_app=1">
          creating Slack Apps
        </a>{" "}
        page
      </li>
      <li>Choose clear app name (e.g. "Jitsu Sync") and select Slack workspace to download data from</li>
      <li>Go to the "OAuth & Permissions" page of created Slack app</li>
      <li>
        Add the following Bot Token{" "}
        <a target="_blank" href="https://api.slack.com/docs/oauth-scopes">
          Scopes
        </a>
        : channels:history, channels:join, channels:read, files:read, groups:read, reactions:read, remote_files:read,
        team:read, usergroups:read, users.profile:read, users:read, users:read.email
      </li>
      <li>Click "Install to Workspace" in the top of of the OAuth & Permissions page and click "Confirm"</li>
      <li>Save Bot User OAuth Token. It is used as Access Token in Jitsu UI</li>
    </ul>
  ),
}

export const stripeDocumentation: ConnectorDocumentation = {
  overview: (
    <>
      The Stripe Connector pulls the following entities from{" "}
      <a target="_blank" href="https://stripe.com/docs/api">
        Stripe API
      </a>{" "}
      {": "}
      <a target="_blank" href="https://stripe.com/docs/api/balance_transactions/list">
        Balance Transactions
      </a>
      {", "}
      <a target="_blank" href="https://stripe.com/docs/api/charges/list">
        Charges
      </a>
      {", "}
      <a target="_blank" href="https://stripe.com/docs/api/coupons/list">
        Coupons
      </a>
      {", "}
      <a target="_blank" href="https://stripe.com/docs/api/customers/list">
        Customers
      </a>
      {", "}
      <a target="_blank" href="https://stripe.com/docs/api/disputes/list">
        Disputes
      </a>
      {", "}
      <a target="_blank" href="https://stripe.com/docs/api/events/list">
        Events
      </a>
      {", "}
      <a target="_blank" href="https://stripe.com/docs/api/invoices/list">
        Invoices
      </a>
      {", "}
      <a target="_blank" href="https://stripe.com/docs/api/invoiceitems/list">
        Invoice Items
      </a>
      <a target="_blank" href="https://stripe.com/docs/api/invoices/invoice_lines">
        Invoice Line Items
      </a>
      {", "}
      <a target="_blank" href="https://stripe.com/docs/api/payouts/list">
        Payouts
      </a>
      {", "}
      <a target="_blank" href="https://stripe.com/docs/api/plans/list">
        Plans
      </a>
      {", "}
      <a target="_blank" href="https://stripe.com/docs/api/products/list">
        Products
      </a>
      {", "}
      <a target="_blank" href="https://stripe.com/docs/api/subscriptions/list">
        Subscriptions
      </a>
      {", "}
      <a target="_blank" href="https://stripe.com/docs/api/subscription_items/list">
        Subscription Items
      </a>
      {", "}
      <a target="_blank" href="https://stripe.com/docs/api/transfers/list">
        Transfers
      </a>
      {", "}
      <a target="_blank" href="https://api.slack.com/methods/usergroups.list">
        User Groups
      </a>
    </>
  ),
  connection: (
    <ul>
      <li>
        Go to the{" "}
        <a target="_blank" href="https://dashboard.stripe.com/apikeys">
          Stripe Dashboard
        </a>{" "}
        page
      </li>
      <li>Save your Account ID (in format: acct_....) and Secret Key (in format: sk_live_....)</li>
    </ul>
  ),
}

export const googleSheetsDocumentation: ConnectorDocumentation = {
  overview: (
    <>
      The Google Sheets connector pulls data from Google Sheets. Each sheet is treated as separate collection and being
      synced to separate table
    </>
  ),
  connection: googleServiceAuthDocumentation({
    serviceName: "Google Sheets",
    scopes: [
      "https://www.googleapis.com/auth/drive.metadata.readonly",
      "https://www.googleapis.com/auth/spreadsheets.readonly",
    ],
    apis: ["Google Sheets API", "Google Drive API"],
    oauthEnabled: true,
    serviceAccountEnabled: false,
  }),
}
